<template>
  <div class="login">
    <div class="main">
      <h2 class="title">微战疫用户登录</h2>
      <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
        <el-form-item label="账号" prop="name">
          <el-input v-model="account.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="account.password" show-password />
        </el-form-item>
      </el-form>
      <div class="account-control">
        <el-checkbox>记住密码</el-checkbox>
        <el-link type="primary">忘记密码</el-link>
      </div>
      <el-button type="primary" class="login-btn" @click="handleLogin"
        >立即登录</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import localCache from '@/utils/cache'
const account = reactive({
  name: localCache.getCache('name') ?? '',
  password: localCache.getCache('password') ?? ''
})
const router = useRouter()
const handleLogin = () => {
  router.push('/layout')
}
const rules = {
  name: [
    {
      required: true,
      message: '用户名是必传内容~',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{5,10}$/,
      message: '用户名必须是5~10个字母或者数字~',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码是必传内容~',
      trigger: 'blur'
    },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: '用户名必须是3位以上的字母或者数字~',
      trigger: 'blur'
    }
  ]
}
</script>
<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background-color: rgb(220, 220, 220);
  .main {
    position: absolute;
    padding: 30px;
    width: 400px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    .title {
      text-align: center;
      margin-bottom: 30px;
    }

    .account-control {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
    .login-btn {
      margin-top: 20px;
      width: 100%;
    }
  }
}
</style>
